<template>
  <div class="develop-record-view">

    <!--        <el-steps direction="vertical">-->
    <!--            <el-step v-for="(item,index) in datas">-->
    <!--                <template #description>-->
    <!--                    <div class="develop-item">-->

    <!--                        <div class="item-top">-->
    <!--                            <p>{{item.content}}</p>-->

    <!--                            <div v-if="item.merchant" class="merchant">-->
    <!--                                <span>{{item.merchant}}</span>-->
    <!--                            </div>-->
    <!--                        </div>-->

    <!--                        <div class="item-bottom">-->

    <!--                            <p class="date">{{item.date}}</p>-->

    <!--                            <p>{{item.people}}</p>-->

    <!--                            <p>({{item.dep}})</p>-->

    <!--                        </div>-->

    <!--                    </div>-->
    <!--                </template>-->

    <!--            </el-step>-->

    <!--        </el-steps>-->

    <el-timeline style="margin-left: 10px">
      <el-timeline-item
        v-for="(item,index) in tableData"
        :key="index"
        :icon="item.icon"
        :type="item.type"
        size="large"
      >
        <div class="develop-item">

          <div class="item-top">
            <p>{{ item.title }}</p>

            <div v-if="item.remark" class="merchant">
              <span>{{ item.remark }}</span>
            </div>
          </div>

          <div class="item-bottom">

            <p class="date">{{ dateFormat('yyyy-mm-dd',item.createdAt) }}</p>

            <p>{{ item.creatorName }}</p>

            <p>({{ item.departmentName }})</p>

          </div>

        </div>
      </el-timeline-item>
    </el-timeline>

  </div>
</template>

<script>
import {useRoute} from 'vue-router'
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const api = inject('api')
    const route = useRoute()

    var data = reactive({
      tableData: []
    })
    const datas = ref([
      {
        content: '注册终端',
        merchant: '代理商：山西B代理有限公司',
        date: '2020-09-18',
        people: '李晓霞',
        dep: '商业部',
        type: 'primary',
      },
      {
        content: '开发失败',
        date: '2020-09-18',
        people: '李晓霞',
        dep: '商业部',
      },
      {
        content: '注册终端',
        merchant: '代理商：山西A代理有限公司',
        date: '2020-09-18',
        people: '李晓霞',
        dep: '商业部',
      },
    ])

    const getData = () => {
      data.tableData = []
      const a = {
        logType: 'planDetail',
        id: props.id ? props.id : route.query.id,
      }
      api.common.GET_COMMON_HISTORY(a).then((res) => {
        if (!res.code && res.data) {
          for (let i = 0; i < res.data.history.length; i++) {
            const a = { ...res.data.history[i] }
            if (i == res.data.history.length - 1) {
              a.type = 'primary'
            }
            data.tableData.unshift(a)
          }
        }
      })
    }

    onMounted(() => {
      getData()
    })

    return {
      datas,
      ...toRefs(data)
    }
  }
})
</script>

<style lang="scss" scoped>

    .develop-record-view{
        .develop-item{
            .item-top{
                display: flex;
                padding-bottom: 10px;

                .merchant{
                    padding-left: 20px;

                }
            }

            .item-bottom{
                display: flex;
                .date{
                    padding-right: 20px;
                }
            }
        }
    }

</style>
